<template>
	<!-- 首页 -->
	<view class="container" v-if="isloding">
		<view class="topicon">
			<!-- 头部 -->
			<image class="myInfo" src="../../static/icons/my.png" mode="" @tap="goMyinfo"></image>
			<view class="title">
				<image src="../../static/icons/logo.png" mode=""></image>
			</view>
		</view>
		<view class="switch">
			<!-- 三个选项 -->
			<view class="Hoisting" @tap="showOne" :class="{active:show==1}">
				<image src="../../static/icons/one.png" mode="" v-if="show==1"></image>
				<image src="../../static/icons/ones.png" mode="" v-if="show!=1"></image>
				<view class="texttitle" :class="{activetitle:show==1}">吊运</view>
				<div class="kailong" v-if="show==1"></div>
			</view>
			<view class="Truck" @tap="showTwo" :class="{active:show==2}">
				<image src="../../static/icons/twos.png" v-if="show==2" mode=""></image>
				<image src="../../static/icons/two.png" v-if="show!=2" mode=""></image>
				<view class="texttitle" :class="{activetitle:show==2}">道路救援</view>
				<div class="kailong" v-if="show==2"></div>
			</view>
			<view class="crane" @tap="showThree" :class="{active:show==3}">
				<image src="../../static/icons/threes.png" v-if="show==3" mode=""></image>
				<image src="../../static/icons/three.png" v-if="show!=3" mode=""></image>
				<view class="texttitle" :class="{activetitle:show==3}">高空作业</view>
				<div class="kailong" v-if="show==3"></div>
			</view>
		</view>
		<view class="second">
			<!-- 三个标题选项 -->
			<view class="showOne" v-if="show==1">
				<view class="page">
					<tabControl :current="currentd" :values="itemd" bgc="#fff" :fixed="true" :scrollFlag='true' @clickItem="onClickItemd"></tabControl>
				</view>
			</view>
			<view class="showTwo" v-if="show==2">
				<view class="page">
					<tabControl :current="current" :values="items" bgc="#fff" :fixed="true" :scrollFlag='true' @clickItem="onClickItem"></tabControl>
				</view>
			</view>
			<view class="showThree" v-if="show==3">
				<view class="page">
					<tabControl :current="currentg" :values="itemg" bgc="#fff" :fixed="true" :scrollFlag='true' @clickItem="onClickItemg"></tabControl>
				</view>
			</view>
		</view>
		<swiper class="swiper" style="margin-top: 20upx;" @change='scollSwiperd' :current='currentd' v-if="show==1">
			<swiper-item v-for="(item,index) in itemd" :key='index'>
				<!-- 使用 scroll-view 来滚动内容区域 -->
				<scroll-view :scroll-y="false" style="height: 100%;">
					<view class="midContent">
						<view class="top" @tap="goVehicleDetails(1,35,item.id)">
							<image :src="item.cover_map" mode=""></image>
							<view class="miaosu">
								<!-- <view class="titleS">
									吊运
								</view> -->
								<view class="li">
									载货吨位:{{item.parameter.tonnage}}
								</view>
								<view class="tiji">
									车辆尺寸:{{item.parameter.size}}
								</view>
								<view class="guige">
									吊重吨位:{{item.parameter.load}}
								</view>
								<view class="guige">
									臂展长度:{{item.parameter.arm_length}}
								</view>
							</view>
							<image class="you" src="../../static/icon/you.png" mode=""></image>
						</view>
						<!-- <view class="bg" style="background-color: #F1F1F1;overflow: hidden;">
							<view class="shuru">
								<view class="item">
									<image src="../../static/icon/qi.png" mode=""></image>
								
									<input @tap="openMap" disabled="true" style="width: 70%;" type="text" :value="startAddress" placeholder="请输入起点"
									 placeholder-class="pStyle" />
								</view>
								<view class="item">
									<image src="../../static/icon/zhong.png" mode="" style="width: 36upx;height: 42upx;"></image>
									<view class="title">
										终点：
									</view>
									<input type="text" disabled="true" @tap="openMapEnd" :value="endAddress" placeholder="请输入终点" placeholder-class="pStyle"/>
								</view>
								<view class="item">
									<image src="../../static/icon/time.png" mode="" style="width: 36upx;height: 36upx;"></image>
									<view class="title">
										预计用车时长:
									</view>
									<picker mode="selector" :range="timeSelect" @change="bindPickerChange">
										<view class="uni-input" style="width: 300upx;" v-if="n==-1">请选择时间</view>
										<view class="uni-input" style="width: 300upx;" v-if="n!=-1">{{timeSelect[n]}}分钟</view>
									</picker>
								</view>
							</view>
						</view> -->
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="bg" style="background-color: #F1F1F1;overflow: hidden;" v-if="show==1">
			<view class="shuru">
				<view class="item">
					<image src="../../static/icon/qi.png" mode=""></image>
					<view class="title">
						起点：
					</view>
					<input @tap="openMap" disabled="true" style="width: 70%;" type="text" :value="startAddress" placeholder="请输入起点"
					 placeholder-class="pStyle" />
				</view>
				<view class="item">
					<image src="../../static/icon/zhong.png" mode="" style="width: 36upx;height: 42upx;"></image>
					<view class="title">
						终点：
					</view>
					<input type="text" disabled="true" @tap="openMapEnd" :value="endAddress" placeholder="请输入终点" placeholder-class="pStyle" />
				</view>
				<view class="item">
					<image src="../../static/icon/time.png" mode="" style="width: 36upx;height: 36upx;"></image>
					<view class="title">
						预计用车时长:
					</view>
					<picker mode="selector" :range="timeSelect" @change="bindPickerChange">
						<view class="uni-input" style="width: 300upx;" v-if="n==-1">请选择时间</view>
						<view class="uni-input" style="width: 300upx;" v-if="n!=-1">{{timeSelect[n]}}分钟</view>
					</picker>
				</view>
			</view>
		</view>
		<!-- 使用 swiper 配合 滑动切换 -->
		<swiper class="swiper" style="margin-top: 20upx;" @change='scollSwiper' :current='current' v-if="show==2">
			<swiper-item v-for="(item,index) in items" :key='index'>
				<!-- 使用 scroll-view 来滚动内容区域 -->
				<scroll-view :scroll-y="false" style="height: 100%;">
					<view class="midContent">
						<view class="top" @tap="goVehicleDetails(2,36,item.id)">
							<image :src="item.cover_map" mode=""></image>
							<view class="miaosu">
								<!-- <view class="titleS">
									道路救援
								</view> -->
								<view class="li">
									载货吨位:{{item.parameter.tonnage}}
								</view>
								<view class="tiji">
									车辆尺寸:{{item.parameter.size}}
								</view>
								<view class="guige">
									吊重吨位:{{item.parameter.load}}
								</view>
								<view class="guige">
									臂展长度:{{item.parameter.arm_length}}
								</view>
								<!-- <view class="guige">
									货箱体积:{{item.parameter.container_volume}}
								</view>
								<view class="guige">
									载货空间:{{item.parameter.cargo_space}}
								</view> -->

							</view>
							<image class="you" src="../../static/icon/you.png" mode=""></image>
						</view>
						<!-- <view class="bg" style="background-color: #F1F1F1;overflow: hidden;">
							<view class="shuru">
								<view class="item">
									<image src="../../static/icon/qi.png" mode=""></image>
									<view class="title">
										起点：
									</view>
									<input @tap="openMap" disabled="true" style="width: 70%;" type="text" :value="startAddress" placeholder="请输入起点"
									 placeholder-class="pStyle" />
								</view>
								<view class="item">
									<image src="../../static/icon/zhong.png" style="width: 36upx;height: 42upx;" mode=""></image>
									<view class="title">
										终点：
									</view>
									<input type="text" disabled="true" @tap="openMapEnd" :value="endAddress" placeholder="请输入终点" placeholder-class="pStyle" />
								</view>
							</view>
						</view> -->
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="bg" style="background-color: #F1F1F1;overflow: hidden;" v-show="show==2">
			<view class="shuru">
				<view class="item">
					<image src="../../static/icon/qi.png" mode=""></image>
					<view class="title">
						起点：
					</view>
					<input @tap="openMap" disabled="true" style="width: 70%;" type="text" :value="startAddress" placeholder="请输入起点"
					 placeholder-class="pStyle" />
				</view>
				<view class="item">
					<image src="../../static/icon/zhong.png" style="width: 36upx;height: 42upx;" mode=""></image>
					<view class="title">
						终点：
					</view>
					<input type="text" disabled="true" @tap="openMapEnd" :value="endAddress" placeholder="请输入终点" placeholder-class="pStyle" />
				</view>
			</view>
		</view>
		<swiper class="swiper" style="margin-top: 20upx;" @change='scollSwiperg' :current='currentg' v-if="show==3">
			<swiper-item v-for="(item,index) in itemg" :key='index'>
				<!-- 使用 scroll-view 来滚动内容区域 -->
				<scroll-view :scroll-y="false" style="height: 100%;">
					<view class="midContent">
						<!-- <view class="titleS">
							高空作业
						</view> -->
						<view class="top" @tap="goVehicleDetails(3,37,item.id)">
							<image :src="item.cover_map" mode=""></image>
							<view class="miaosu">
								<!-- <view class="titleS">
									高空作业
								</view> -->
								<view class="li">
									载货吨位:{{item.parameter.tonnage}}
								</view>
								<view class="tiji">
									车辆尺寸:{{item.parameter.size}}
								</view>
								<view class="guige">
									吊重吨位:{{item.parameter.load}}
								</view>
								<view class="guige">
									臂展长度:{{item.parameter.arm_length}}
								</view>
								<!-- <view class="guige">
									货箱体积:{{item.parameter.container_volume}}
								</view>
								<view class="guige">
									载货空间:{{item.parameter.cargo_space}}
								</view> -->

							</view>
							<image class="you" src="../../static/icon/you.png" mode=""></image>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="bg" style="background-color: #F1F1F1;overflow: hidden;" v-show="show==3">
			<view class="shuru">
				<view class="item">
					<image src="../../static/icon/zhong.png" style="width: 36upx;height: 42upx;" mode=""></image>
					<view class="title">
						终点：
					</view>
					<input type="text" disabled="true" @tap="openMapEnd" :value="endAddress" placeholder="请输入终点" placeholder-class="pStyle" />
				</view>
				<view class="item">
					<image src="../../static/icon/time.png" mode="" style="width: 36upx;height: 36upx;"></image>
					<view class="title">
						预计用车时长:
					</view>
					<picker mode="selector" :range="timeSelect" @change="bindPickerChange">
						<view class="uni-input" style="width: 300upx;" v-if="n==-1">请选择时间</view>
						<view class="uni-input" style="width: 300upx;" v-if="n!=-1">{{timeSelect[n]}}分钟</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="notices" @tap="Phone">
			<view class="bg">
				<image src="../../static/bh.png" mode=""></image>
				<view class="tex">
					联系客服
				</view>
			</view>
		</view>
		<view class="notice" @tap="goNews">
			<view class="bg">
				<image src="../../static/icons/tips.png" mode=""></image>
			</view>
			<view class="newInfo">
				{{newsNum}}
			</view>
		</view>
		<view class="bottomBox">
			<view class="priceBox">
				<view class="text">
					￥{{(pirce).toFixed(2)}}
				</view>
				<view class="btn" @tap="goPrice">
					预支付价格（查看明细）
				</view>
			</view>
			<view class="btnBox">
				<view class="Now" @tap="goConfirm(1)">
					现在用车
				</view>
				<view class="make" @tap="goConfirm(2)">
					<image src="../../static/icons/time.png" mode=""></image>
					<view class="item">
						预约
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';
	export default {
		components: {
			tabControl
		},
		data() {
			return {
				itemd: ['吨位：1吨', '吨位：2吨', '吨位：3吨', '吨位：4吨'], //吊运
				items: ['吨位：1吨', '吨位：2吨', '吨位：3吨', '吨位：4吨'], //道路救援
				itemg: ['吨位：1吨', '吨位：2吨', '吨位：3吨', '吨位：4吨'], //高空作业
				timeSelect: ['60', '70', '80', '90', '100', '110', '120', '130', '140', '150', '160', '170', '180', '190', '200',
					'210',
					'220', '230', '240'
				],
				currentd: 0, //吊运当前显示
				current: 0, //道路救援当前显示
				currentg: 0, //高空作业当前显示
				show: 1,
				showS: 1,
				startAddress: '', //起点位置
				endAddress: '', //终点位置
				isLogin: true, //受否登录，true表示已登录，false表示未登录
				token: '',
				isloding: false, //是否加载完成
				info: '',
				newsNum: 0,
				n: -1, //picker角标
				qiWlatitude: '', //起点纬度
				qiJlongitude: '', //起点精度
				zhWlatitude: '', //终点维度
				zhJlongitude: '', //终点精度
				distance: 0,
				pirce: 0.00, //预支付价格
				charge: '',
				disPriceD: '', //吊运距离价格
				timePriceD: '', //吊运时长价格
				disPriceRoad: '', //道路救援距离单价
				timePriceWelkin: '' ,//高空作业价格
				phone:''
			}
		},
		onShow() {
			if (this.token != '') {
				uni.showLoading({
					title: '加载中',
					mask: false
				});
				uni.request({
					url: this.webUrl + '/user/index/index',
					method: 'GET',
					header: {
						token: this.token
					},
					data: {},
					success: res => {
						uni.hideLoading()
						this.newsNum = res.data.data.num //改变消息值
					},
					fail: () => {
						uni.showToast({
							title: '网络错误',
							icon: 'none',
							duration: 2000
						});
					},
					complete: () => {}
				});
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'token',
				success: (res) => {
					// console.log(res.data);
					this.token = res.data
					uni.showLoading({
						title: '加载中',
						mask: false
					});
					uni.request({
						url: this.webUrl+'/user/my/hotline',
						method: 'GET',
						header:{
							token:res.data
						},
						data: {},
						success: Phone => {
							// console.log(Phone)
							this.phone=Phone.data.data.phone
						},
						fail: () => {},
						complete: () => {}
					});
					uni.request({
						url: this.webUrl + '/user/index/index',
						method: 'GET',
						header: {
							token: res.data
						},
						data: {},
						success: res => {
							uni.hideLoading()
							this.info = res.data.data
							this.newsNum = res.data.data.num //改变消息值
							this.itemd = res.data.data.list[0].type
							this.items = res.data.data.list[1].type
							this.itemg = res.data.data.list[2].type
							this.charge = res.data.data.charge
							this.isloding = true
							// console.log(res)
						},
						fail: () => {
							uni.showToast({
								title: '网络错误',
								icon: 'none',
								duration: 2000
							});
						},
						complete: () => {}
					});
				},
				fail: (e) => {
					// this.isLogin = false
					console.log('未登录')
				}
			});
		},
		methods: {
			openMap() { //打开地图选择位置
				var that = this
				uni.chooseLocation({
					success: function(res) {
						// console.log(res)
						that.startAddress = res.name
						that.qiWlatitude = res.latitude
						that.qiJlongitude = res.longitude
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						if (that.qiWlatitude != '' && that.zhWlatitude != '') {
							uni.showLoading({
								title: '加载中',
								mask: false
							});
							uni.request({
								url: 'https://apis.map.qq.com/ws/distance/v1/?mode=driving&from=' + res.latitude + ',' + res.longitude +
									'&to=' + that.zhWlatitude + ',' + that.zhJlongitude + '&key=RDTBZ-GDJCX-T5T45-7EOF5-QVSF2-XCF4E',
								method: 'GET',
								data: {},
								success: res => {
									console.log(res)
									uni.hideLoading()
									if (res.data.status == 0) {
										that.distance = res.data.result.elements[0].distance //距离米
										console.log(that.distance)
										let disPriceD = that.distance / 1000 * that.charge.hoisting_consign //吊运距离价格
										that.disPriceD = disPriceD
										let timePriceD = (that.timeSelect[that.n] - that.charge.lowest) * that.charge.hoisting_unitprice //吊运时常价格
										that.timePriceD = timePriceD
										let disPriceRoad = that.distance / 1000 * that.charge.road_consign //道路救援距离单价
										that.disPriceRoad = disPriceRoad
										let timePriceWelkin = that.timeSelect[that.n] * that.charge.welkin_unitprice //高空作业价格
										that.timePriceWelkin = timePriceWelkin
										if (that.show == 1 && that.n != -1) {
											// that.pirce = disPriceD + timePriceD //吊运
											if(disPriceD + timePriceD<that.charge.hoisting_min){
												that.pirce=that.charge.hoisting_min
											}else{
												that.pirce = disPriceD + timePriceD //吊运
											}
										} else if (that.show == 2) {
											if(disPriceRoad<that.charge.road_min){
												that.pirce=that.charge.road_min
											}else{
												that.pirce = disPriceRoad //吊运
											}
										} else if (that.show == 3 && that.n != -1) {
											if(timePriceWelkin<that.charge.welkin_min){
												that.pirce=that.charge.welkin_min
											}else{
												that.pirce = timePriceWelkin
											}
										}
									} else {
										uni.showToast({
											title: '网络错误',
											icon: 'none',
											duration: 2000
										});
									}
								},
								fail: () => {
									uni.hideLoading()
									uni.showToast({
										title: '网络错误',
										icon: 'none',
										duration: 2000
									});
								},
								complete: () => {}
							});
						} else {}
					},
				});
			},
			openMapEnd() {
				var that = this
				uni.chooseLocation({
					success: function(res) {
						// console.log('位置名称：' + res.name);
						that.endAddress = res.name
						that.zhWlatitude = res.latitude
						that.zhJlongitude = res.longitude
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						if (that.qiWlatitude != '' && that.zhWlatitude != '') {
							uni.showLoading({
								title: '加载中',
								mask: false
							});
							uni.request({
								url: 'https://apis.map.qq.com/ws/distance/v1/?mode=driving&from=' + that.qiWlatitude + ',' + that.qiJlongitude +
									'&to=' + res.latitude + ',' + res.longitude + '&key=RDTBZ-GDJCX-T5T45-7EOF5-QVSF2-XCF4E',
								method: 'GET',
								data: {},
								success: res => {
									console.log(res)
									uni.hideLoading()
									if (res.data.status == 0) {
										that.distance = res.data.result.elements[0].distance
										let disPriceD = that.distance / 1000 * that.charge.hoisting_consign //吊运距离价格
										that.disPriceD = disPriceD
										let timePriceD = (that.timeSelect[that.n] - that.charge.lowest) * that.charge.hoisting_unitprice //吊运时常价格
										that.timePriceD = timePriceD
										let disPriceRoad = that.distance / 1000 * that.charge.road_consign //道路救援距离单价
										that.disPriceRoad = disPriceRoad
										let timePriceWelkin = that.timeSelect[that.n] * that.charge.welkin_unitprice //高空作业价格
										that.timePriceWelkin = timePriceWelkin
										if (that.show == 1 && that.n != -1) {
											if(disPriceD + timePriceD<that.charge.hoisting_min){
												that.pirce=that.charge.hoisting_min
											}else{
												that.pirce = disPriceD + timePriceD //吊运
											}
										} else if (that.show == 2) {
											if(disPriceRoad<that.charge.road_min){
												that.pirce=that.charge.road_min
											}else{
												that.pirce = disPriceRoad //吊运
											}
										} else if (that.show == 3 && that.n != -1) {
											if(timePriceWelkin<that.charge.welkin_min){
												that.pirce=that.charge.welkin_min
											}else{
												that.pirce = timePriceWelkin
											}
										}
									} else {
										uni.showToast({
											title: '网络错误',
											icon: 'none',
											duration: 2000
										});
									}
								},
								fail: () => {
									uni.hideLoading()
									uni.showToast({
										title: '网络错误',
										icon: 'none',
										duration: 2000
									});
								},
								complete: () => {}
							});
						} else {}
					},
				});
			},
			Phone(){
				uni.makePhoneCall({
				    phoneNumber: this.phone //仅为示例
				});
			},
			goNews() {
				uni.navigateTo({
					url: '../news/news?token=' + this.token,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			bindPickerChange(e) {
				let that = this
				that.n = e.target.value
				let disPriceD = that.distance / 1000 * that.charge.hoisting_consign //吊运距离价格
				that.disPriceD = disPriceD
				let timePriceD = (that.timeSelect[that.n] - that.charge.lowest) * that.charge.hoisting_unitprice //吊运时常价格
				that.timePriceD = timePriceD
				let disPriceRoad = that.distance / 1000 * that.charge.road_consign //道路救援距离单价
				that.disPriceRoad = disPriceRoad
				let timePriceWelkin = that.timeSelect[that.n] * that.charge.welkin_unitprice //高空作业价格
				that.timePriceWelkin = timePriceWelkin
				if (that.show == 1) {
					if(disPriceD + timePriceD<that.charge.hoisting_min){
						that.pirce=that.charge.hoisting_min
					}else{
						that.pirce = disPriceD + timePriceD //吊运
					}
				} else if (that.show == 2) {
					if(disPriceRoad<that.charge.road_min){
						that.pirce=that.charge.road_min
					}else{
						that.pirce = disPriceRoad //吊运
					}
				} else if (that.show == 3) {
					if(timePriceWelkin<that.charge.welkin_min){
						that.pirce=that.charge.welkin_min
					}else{
						that.pirce = timePriceWelkin
					}
				}
			},
			goVehicleDetails(type, id, typeId) {
				// console.log(type,id,typeId)
				uni.navigateTo({
					url: '../vehicleDetails/vehicleDetails?type=' + type + '&id=' + id + '&typeId=' + typeId,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goPrice() {
				if (this.token == '') {
					uni.showToast({
						title: '尚未登录',
						icon: 'none',
						duration: 2000
					});
				} else if (this.show == 1 || this.show == 2) {
					if (this.startAddress == '' || this.endAddress == '') {
						uni.showToast({
							title: '必须选择起点和终点',
							icon: 'none',
							duration: 2000
						});
					} else if (this.n == -1&&this.show==1) {
						uni.showToast({
							title: '必须选择用车时间',
							icon: 'none',
							duration: 2000
						});
					} else if(this.n == -1&&this.show==2){
						uni.navigateTo({
							url: '../priceDetails/priceDetails?distance=' + this.distance + '&disPriceRoad=' + this.disPriceRoad +
								'&timePriceWelkin=' + this.timePriceWelkin + '&disPriceD=' + this.disPriceD + '&timePriceD=' + this.timePriceD +
								'&duration_at=0' + '&price=' + this.pirce + '&type=' + this.show + '&charge=' + JSON
								.stringify(this.charge),
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}else{
						// console.log(JSON.stringify(this.charge))
						uni.navigateTo({
							url: '../priceDetails/priceDetails?distance=' + this.distance + '&disPriceRoad=' + this.disPriceRoad +
								'&timePriceWelkin=' + this.timePriceWelkin + '&disPriceD=' + this.disPriceD + '&timePriceD=' + this.timePriceD +
								'&duration_at=' + this.timeSelect[this.n] + '&price=' + this.pirce + '&type=' + this.show + '&charge=' + JSON
								.stringify(this.charge),
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}
				} else if (this.show == 3) {
					if (this.endAddress == '') {
						uni.showToast({
							title: '终点不能为空',
							icon: 'none',
							duration: 2000
						});
					} else if (this.n == -1) {
						uni.showToast({
							title: '必须选择用车时间',
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.navigateTo({
							url: '../priceDetails/priceDetails?distance=' + this.distance + '&disPriceRoad=' + this.disPriceRoad +
								'&timePriceWelkin=' + this.timePriceWelkin + '&disPriceD=' + this.disPriceD + '&timePriceD=' + this.timePriceD +
								'&duration_at=' + this.timeSelect[this.n] + '&price=' + this.pirce + '&type=' + this.show + '&charge=' + JSON
								.stringify(this.charge),
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}
				}
			},
			goMyinfo() {
				uni.navigateTo({
					url: '../myInfo/myInfo',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goConfirm(e) {
				if (this.token == '') {
					uni.showToast({
						title: '尚未登录',
						icon: 'none',
						duration: 2000
					});
				} else if (this.show == 1 || this.show == 2) {
					if (this.startAddress == '' || this.endAddress == '') {
						uni.showToast({
							title: '必须选择起点和终点',
							icon: 'none',
							duration: 2000
						});
					} else if (this.n == -1&&this.show==1) {
						uni.showToast({
							title: '必须选择用车时间',
							icon: 'none',
							duration: 2000
						});
					} else if(this.n == -1&&this.show==2){
						var specs_id
						if (this.show == 1) {
							specs_id = this.itemd[this.currentd].id
						} else if (this.show == 2) {
							specs_id = this.items[this.current].id
						}
						uni.navigateTo({
							url: '../ConfirmationOrder/ConfirmationOrder?id=' + this.show + '&time=' + e +
								'&prepayment=' + this.pirce + '&token=' + this.token + '&start=' + this.startAddress +
								'&start_lng=' + this.qiJlongitude + '&start_lat=' + this.qiWlatitude + '&end=' + this.endAddress +
								'&end_lng=' + this.zhJlongitude + '&end_lat=' + this.zhWlatitude + '&specs_id=' + specs_id + '&duration_at=0' + '&distance=' + this.distance,
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}else{
						var specs_id
						if (this.show == 1) {
							specs_id = this.itemd[this.currentd].id
						} else if (this.show == 2) {
							specs_id = this.items[this.current].id
						}
						uni.navigateTo({
							url: '../ConfirmationOrder/ConfirmationOrder?id=' + this.show + '&time=' + e +
								'&prepayment=' + this.pirce + '&token=' + this.token + '&start=' + this.startAddress +
								'&start_lng=' + this.qiJlongitude + '&start_lat=' + this.qiWlatitude + '&end=' + this.endAddress +
								'&end_lng=' + this.zhJlongitude + '&end_lat=' + this.zhWlatitude + '&specs_id=' + specs_id + '&duration_at=' +
								this.timeSelect[this.n] + '&distance=' + this.distance,
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}
				} else if (this.show == 3) {
					if (this.endAddress == '') {
						uni.showToast({
							title: '终点不能为空',
							icon: 'none',
							duration: 2000
						});
					} else if (this.n == -1) {
						uni.showToast({
							title: '必须选择用车时间',
							icon: 'none',
							duration: 2000
						});
					} else {
						let specs_id = this.itemg[this.currentg].id
						uni.navigateTo({
							url: '../ConfirmationOrder/ConfirmationOrder?id=' + this.show + '&time=' + e +
								'&prepayment=' + this.pirce + '&token=' + this.token + '&start="不需要起点"' + '&start_lng=""' + '&start_lat=""' + '&end=' + this.endAddress +
								'&end_lng=' + this.zhJlongitude + '&end_lat=' + this.zhWlatitude + '&specs_id=' + specs_id + '&duration_at=' +
								this.timeSelect[this.n] + '&distance=' + this.distance,
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}
				}
			},
			onClickItemd(val) {
				this.currentd = val.currentIndex
			},
			onClickItem(val) {
				this.current = val.currentIndex
			},
			onClickItemg(val) {
				this.currentg = val.currentIndex
			},
			scollSwiperd(e) {
				this.currentd = e.target.current
			},
			scollSwiper(e) {
				this.current = e.target.current
			},
			scollSwiperg(e) {
				this.currentg = e.target.current
			},
			showOne() {
				this.show = 1
				let that = this
				if (this.distance != 0 && this.n != -1) {
					let disPriceD = this.distance / 1000 * this.charge.hoisting_consign //吊运距离价格
					this.disPriceD = disPriceD
					let timePriceD = (this.timeSelect[this.n] - this.charge.lowest) * this.charge.hoisting_unitprice //吊运时常价格
					this.timePriceD = timePriceD
					if(disPriceD + timePriceD<this.charge.hoisting_min){
						this.pirce=that.charge.hoisting_min
					}else{
						this.pirce = disPriceD + timePriceD //吊运
					}
				}
			},
			showTwo() {
				this.show = 2
				this.showS = 1
				let that = this
				if (this.startAddress != '' || this.endAddress != '') {
					let disPriceRoad = this.distance / 1000 * this.charge.road_consign //道路救援距离单价
					this.disPriceRoad = disPriceRoad
					if(disPriceRoad<this.charge.road_min){
						this.pirce=that.charge.road_min
					}else{
						this.pirce = disPriceRoad //吊运
					}
				} else {
					this.pirce = 0 //吊运
				}
			},
			showThree() {
				this.show = 3
				let that = this
				if (this.n != -1) {
					let timePriceWelkin = this.timeSelect[this.n] * this.charge.welkin_unitprice //高空作业价格
					this.timePriceWelkin = timePriceWelkin
					if(timePriceWelkin<that.charge.welkin_min){
						that.pirce=that.charge.welkin_min
					}else{
						that.pirce = timePriceWelkin
					}
				} else {
					that.pirce = 0.00
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: absolute;
		left: 0;
		bottom: 0;
		top: 0;
		right: 0;
		background: #F1F1F1;

		.active {
			transition: background-color .4s;
			// background-color: #FFBDA8;

			.text {
				transition: color .4s;
				color: #FFFFFF !important;
			}
		}

		page {
			height: 100%;
		}

		.page {
			// padding-top: 98rpx;
			width: 100%;
			height: 100%;
		}

		.topicon {
			margin: 60upx 30upx 22upx 30upx;
			// width: 40upx;
			height: 45upx;
			display: flex;

			.myInfo {
				position: absolute;
				width: 50upx;
				height: 50upx;
			}

			.title {
				text-align: center;
				width: 100%;
				font-weight: bolder;

				image {
					width: 149upx;
					height: 31upx;
				}
			}
		}


		.switch {
			position: relative;
			width: 100%;
			height: 140upx;
			line-height: 120upx;
			// border-radius: 30upx;
			background: #FE5621;
			display: flex;

			.text {
				font-size: 24upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
				color: #999999;
			}

			.Hoisting {
				display: flex;
				align-items: center;
				flex-direction: column;
				position: absolute;
				left: 0;
				top: 0;
				height: 140upx;
				// padding: 15upx 0;
				// background: #4CD964;
				width: 33%;
				border-top-right-radius: 65upx;
				border-bottom-right-radius: 65upx;
				text-align: center;
			}

			.Truck {
				display: flex;
				align-items: center;
				flex-direction: column;
				position: absolute;
				left: 30%;
				top: 0;
				height: 140upx;
				// padding: 15upx 0;
				width: 40%;
				border-radius: 65upx;
				// background: #DD524D;
				text-align: center;
			}

			.crane {
				display: flex;
				align-items: center;
				flex-direction: column;
				position: absolute;
				top: 0;
				right: 0;
				height: 140upx;
				// background: #F0AD4E;
				// padding: 15upx 0;
				width: 33%;
				border-top-left-radius: 65upx;
				border-bottom-left-radius: 65upx;
				text-align: center;
			}

			image {
				width: 102upx;
				height: 102upx;
			}

			.texttitle {
				font-size: 24upx;
				line-height: 24upx;
				margin-top: -10upx;
			}

			.kailong {
				width: 0;
				height: 0;
				border-right: 22upx solid transparent;
				border-left: 22upx solid transparent;
				border-bottom: 24upx solid #FFFFFF;
			}

			.activetitle {
				color: #FFFFFF;
			}
		}

		.second {
			// border-bottom: 1px solid #999999;
			font-size: 24upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			line-height: 50upx;
			color: rgba(52, 52, 52, 1);
			height: 50upx;
			box-sizing: border-box;
			// border-bottom-left-radius: 20upx;
			// border-bottom-right-radius: 20upx;
			// box-shadow: 0 8upx 24upx #999999;

			.item {
				font-size: 24upx;
			}

			.showOne {
				// margin-left: 90upx;
				border-radius: 0px 0px 30upx 30upx;
			}

			.showTwo {
				// padding: 0 30upx;
				display: flex;
				font-size: 20upx;
				color: #C0C0C0;
				justify-content: space-around;

				.activeS {
					color: #000;
				}
			}

			.showThree {
				display: flex;
				// padding: 0 30upx;
				font-size: 20upx;
				justify-content: space-around;
			}
		}

		.shuru {
			margin: 0 13upx;
			background: #FFFFFF;
			margin-top: 10upx;

			.item {
				border-top: 2upx solid #EAF3F7;
				box-sizing: border-box;
				// padding: 28upx 0;
				height: 100upx;
				font-size: 32upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(52, 52, 52, 1);
				display: flex;
				line-height: 100upx;

				image {
					margin: auto 18upx;
					width: 34upx;
					height: 46upx;
				}

				input {
					width: 60%;
					margin: auto 0;
					font-size: 26upx;
				}

				.pStyle {
					font-size: 24upx;
					color: #333333;
				}
			}
		}

		.leftContent,
		.midContent {
			// margin:30upx;
			// box-sizing: border-box;
			background: rgba(255, 255, 255, 1);
			// box-shadow: 0px 3px 15px 1px rgba(0, 0, 0, 0.11);
			// border-radius: 30px;
			overflow: hidden;

			.titleS {
				font-size: 36upx;
				font-family: PingFang SC;
				line-height: 36upx;
				font-weight: bold;
				color: rgba(0, 0, 0, 1);
				width: 100%;
				text-align: center;
				margin-top: 20upx;
			}

			// border: 1px solid #555555;
			.top {
				position: relative;
				display: flex;

				image {
					border-radius: 6upx;
					width: 250upx;
					height: 220upx;
					margin: 10upx 34upx 24upx 40upx;
				}

				.miaosu {
					margin: 10upx 0 0 0;

					// .titleS {
					// 	font-size: 36upx;
					// 	font-family: PingFang SC;
					// 	line-height: 36upx;
					// 	font-weight: bold;
					// 	color: rgba(0, 0, 0, 1);
					// }

					.li {
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						width: 320upx;
						margin-top: 24upx;
						font-size: 30upx;
						line-height: 30upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 1);
					}

					.tiji {
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						width: 320upx;
						margin-top: 24upx;
						font-size: 30upx;
						line-height: 30upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 1);
					}

					.guige {
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						width: 320upx;
						margin-top: 24upx;
						font-size: 30upx;
						line-height: 30upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 1);
					}
				}

				.you {
					position: absolute;
					width: 26upx;
					height: 34upx;
					top: 110upx;
					right: 30upx;
					margin: 0;
				}

				.detailsBtn {
					margin-top: 20upx;
					font-size: 22upx;
					color: #999999;
					display: flex;
					align-items: center;
				}
			}

			.shuru {
				margin: 0 13upx;
				background: #FFFFFF;
				margin-top: 10upx;

				.item {
					border-top: 2upx solid #EAF3F7;
					box-sizing: border-box;
					// padding: 28upx 0;
					height: 100upx;
					font-size: 32upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(52, 52, 52, 1);
					display: flex;
					line-height: 100upx;

					image {
						margin: auto 18upx;
						width: 34upx;
						height: 46upx;
					}

					input {
						width: 60%;
						margin: auto 0;
						font-size: 26upx;
					}

					.pStyle {
						font-size: 24upx;
						color: #333333;
					}
				}
			}
		}
		.notices {
			position: absolute;
			width: 60upx;
			height: 60upx;
			left: 30upx;
			bottom: 306upx;
			.bg {
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 120upx;
				height: 120upx;
				background: #fff;
				image {
					width: 60upx;
					height: 60upx;
				}
				.tex{
					font-size: 24rpx;
					font-family:PingFang SC;
				}
			}
		}
		.notice {
			position: absolute;
			width: 60upx;
			height: 60upx;
			right: 30upx;
			bottom: 246upx;

			.bg {
				width: 44upx;
				height: 44upx;

				image {
					width: 44upx;
					height: 44upx;
				}
			}

			.newInfo {
				background: #FFA992;
				min-width: 20upx;
				min-height: 20upx;
				padding: 4upx;
				border-radius: 50%;
				text-align: center;
				line-height: 20upx;
				font-size: 20upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				position: absolute;
				top: -4upx;
				left: -4upx;
			}
		}

		.bottomBox {
			position: absolute;
			width: 100%;
			bottom: 0;

			.priceBox {
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				height: 128upx;
				width: 724upx;
				background: #FFFFFF;
				// line-height: 80upx;
				align-items: center;
				justify-content: center;

				.text {
					color: #333333;
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: 500;
				}

				.btn {
					// position: absolute;
					// top: 18upx;
					// right: 42upx;
					// width: 110upx;
					// height: 42upx;
					padding: 4upx;
					// border: 1px solid rgba(254, 86, 33, 1)
					border-radius: 10px;
					font-size: 26upx;
					line-height: 42upx;
					font-family: SimHei;
					font-weight: 400;
					color: rgba(137, 137, 137, 1);
				}
			}

			.btnBox {
				display: flex;
				height: 98upx;
				text-align: center;
				background: #FFB22F;
				line-height: 98upx;

				.Now {
					width: 476upx;
					background: rgba(254, 86, 33, 1);
					// box-shadow: 0upx 4upx 9upx 0upx rgba(0, 0, 0, 0.13);
					// border-radius: 0upx 48upx 48upx 0upx;
					font-size: 50upx;
					font-family: SimHei;
					font-weight: bold;
					color: rgba(255, 255, 255, 1);
				}

				.make {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 274upx;
					color: rgba(102, 102, 102, 1);

					image {
						width: 40upx;
						height: 40upx;
					}

					.item {
						margin-left: 22upx;
						font-size: 36upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
					}
				}
			}
		}
	}
</style>
